<template>
  <div class="general-view">
    <div class="view-items">
      <b>1</b>
      <h4>JVM监控异常统计</h4>
      <p>堆使用:30</p>
      <p>垃圾收集:50</p>
      <p>死锁线程:100</p>
      <p>内存泄漏检测统计:5</p>
    </div>
    <div class="view-items">
      <b>2</b>
      <h4>线程池使用</h4>
      <p>线程池使用队列请求数量:230</p>
      <p>超时线程或挂起线程:50</p>
      <p>线程池状态:顺畅</p>
    </div>
    <div class="view-items">
      <b>3</b>
      <h4>数据库连接监控</h4>
      <p>连接池泄露:0</p>
      <p>预编译语句缓存命中率:30%</p>
      <p>连接失败次数:3</p>
      <p>连接池请求连接的数量:225</p>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'QueueTrend',
  components: {
  },
  data () {
    return {
      
    }
  },
  created () {
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
  .general-view{
    .view-items{
      float: left;
      width: 48%;
      padding: 10px 15px;
      position: relative;
      height: 130px;
      border: 1px solid #106dd2;
      margin-bottom: 10px;
      border-radius: 5px;
      background: #fff;
      b{
        position: absolute;
        left: -15px;
        top: -15px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #20aa9d;
        color: #fff;
        font-size: 15px;
        border-radius: 100%;
      }
      p{
        margin-bottom: 0;
      }
    }
    .view-items:nth-child(2n){
      margin-left: 4%;
    }
  }
</style>
